<template>
  <li class="list-from-item" :style="{ minWidth: newItemWidth, maxWidth: newItemMaxWidth }">
    <div v-if="label !== ''" class="label-box" :style="{ minWidth: newLabelWidth }">
      <span class="label">{{ label }}</span>
    </div>
    <div class="right-box">
      <slot></slot>
    </div>
  </li>
</template>

<script setup lang="ts">
  const props = defineProps({
    /** 标题文字 */
    label: { type: String, default: '' },
    /** label宽度 */
    labelWidth: { type: Number, default: 0 },
    /** item宽度 */
    itemWidth: { type: Number, default: 0 },
    /** item宽度 */
    itemMaxWidth: { type: Number, default: 0 },
  });
  defineSlots<{
    /** 主体内容 */
    default: () => void;
  }>();
  const newLabelWidth = computed(() => (props.labelWidth > 0 ? `${props.labelWidth}px` : 'var(--list-from-label-width)'));
  const newItemWidth = computed(() => `min(100%, ${props.itemWidth > 0 ? `${props.itemWidth}px` : 'var(--list-from-item-width)'})`);
  const newItemMaxWidth = computed(() => (props.itemMaxWidth > 0 ? `${props.itemMaxWidth}px` : 'var(--list-from-item-max-width)'));
</script>

<style lang="scss" scoped src="./list-from-item.scss"></style>
